<script lang="ts" setup>
	import { ref, reactive, inject, toRefs } from "vue";
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	import {
		useRouter
	} from 'uni-mini-router';
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	const routerLink = (e) => {
		uni.$on('refreshSend', () => {
			getDetail()
			uni.$off('refreshSend')
		})
		router.push({
			name: e,
			params: {
				id: orderDetail.value.id
			}
		})
	}
	let orderId = ref()
	let orderDetail = ref(null)
	onLoad((option) => {
		console.log(option.id);
		orderId.value = option.id
		getDetail()
	})
	const getDetail = () => {
		//获取详情
		proxy.$req('GET', proxy.$api.gysOrderDetail, {
			id: orderId.value,
		}).then((res) => {
			console.log(res);
			orderDetail.value = res.result
		})
	}
	//确认买家签收
	const confirmShou = () => {
		proxy.$req('POST', proxy.$api.gysOrderEdit, {
			id: orderDetail.value.id,
			status: 4,
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				getDetail()
			}
		})
	}
	//关闭弹窗
	const confirmClose = () => {
		//确认关闭订单
		proxy.$req('POST', proxy.$api.gysOrderEdit, {
			id: orderId.value,
			status: -2,
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				closePop.value = false
				getDetail()
			}
		})
	}
	let closePop = ref(false)
	let closePopList = ref([
		{
			name: '未及时付款',
			checked: true,
			id: ''
		},
		{
			name: '买家不想买',
			checked: false,
			id: ''
		},
		{
			name: '买家信息填写错误，重新拍',
			checked: false,
			id: ''
		},
		{
			name: '买家恶意捣乱',
			checked: false,
			id: ''
		},
		{
			name: '缺货',
			checked: false,
			id: ''
		}
	])
</script>
<template>
	<view class="allContainer" v-if="orderDetail!=null">
		<view class="orderStatus">
			当前订单状态：
			<text v-if="orderDetail.status==1">等待买家付款</text>
			<text v-if="orderDetail.status==2">买家已付款</text>
			<text v-if="orderDetail.status==3">卖家已发货</text>
			<text v-if="orderDetail.status==4">买家已收货</text>
			<text v-if="orderDetail.status==5">已评价</text>
			<text v-if="orderDetail.status==-2">订单已关闭</text>

			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==1">申请中</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==2">已同意</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==3">已寄回</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==4">已退款</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==5">退款失败</text>
			<text v-if="orderDetail.status==-1&&orderDetail.refundStatus==-1">取消售后</text>

			<text v-if="orderDetail.status==4&&orderDetail.sendbackStatus==1">卖家已申请</text>
			<text v-if="orderDetail.status==4&&orderDetail.sendbackStatus==2">已同意寄回</text>
			<text v-if="orderDetail.status==4&&orderDetail.sendbackStatus==3">已寄回</text>
			<text v-if="orderDetail.status==6">寄回成功</text>
		</view>
		<view class="faInfo">
			<view class="faTit">发货信息</view>
			<view class="faCon r-flex-start-start">
				<text>买家备注</text>
				<text>{{ orderDetail.reamrk }}</text>
			</view>
			<view class="faCon r-flex-start-start">
				<text>收货信息</text>
				<text>{{ orderDetail.realName }}，{{ orderDetail.userPhone }}，{{ orderDetail.userAddress }}</text>
			</view>
			<view class="faCon r-flex-start-start" v-if="orderDetail.deliveryId">
				<text>物流单号</text>
				<text>{{ orderDetail.deliveryId }}</text>
			</view>
			<view class="faCon r-flex-start-start" v-if="orderDetail.deliveryName">
				<text>物流公司</text>
				<text>{{ orderDetail.deliveryName }}</text>
			</view>
		</view>
		<view class="consumerInfo">
			<view class="cTit">买家信息</view>
			<view class="consumerCon r-flex-between-center">
				<text>买家昵称</text>
				<text>{{ orderDetail.realName }}</text>
			</view>
			<view class="consumerCon r-flex-between-center">
				<text>联系电话</text>
				<text>{{ orderDetail.userPhone }}</text>
			</view>
		</view>
		<view class="goodsInfo" v-for="(item,index) in orderDetail.orderInfoList" :key="index">
			<view class="gcGoods r-flex-start-start">
				<image :src="item.sku!=null?item.sku.logo:''" mode=""></image>
				<view class="gcgCon c-flex-start-start">
					<text class="u-line-1">{{ item.productName }}</text>
					<text>￥{{ item.price }}</text>
					<text>×{{ item.cartNum }}</text>
				</view>
			</view>
			<view class="gcInAll">
				共{{ orderDetail.totalNum }}件 实收：¥{{ orderDetail.payPrice }}（含快递：¥{{ orderDetail.payPostage }}）
			</view>
		</view>
		<view class="orderInfo">
			<view class="oTit">订单信息</view>
			<view class="oCon r-flex-between-center">
				<text>订单编号</text>
				<view class="r-flex-center-center">
					<text>{{ orderDetail.tradeNo }}</text>
					<u-icon name="file-text"></u-icon>
				</view>
			</view>
			<view class="oCon r-flex-between-center">
				<text>支付交易号</text>
				<text>{{ orderDetail.payId }}</text>
			</view>
			<view class="oCon r-flex-between-center">
				<text>创建时间</text>
				<text>{{ orderDetail.addTime }}</text>
			</view>
		</view>
		<view class="fixedBox r-flex-center-center">
			<text @click="closePop=true" v-if="orderDetail.status==1">关闭订单</text>
			<text @click="routerLink('sendGoods')" v-if="orderDetail.status==2">去发货</text>
			<text @click="confirmShou" v-if="orderDetail.status==3">确认买家签收</text>
			<!-- <text @click="routerLink('jihuanOrderDetail')" v-if="false">寄回</text> -->
		</view>
	</view>
	<u-popup :show="closePop" round="16" @close="closePop=false">
		<view class="closePop">
			<view class="cpTit">
				选择关闭理由
			</view>
			<view class="cpItem r-flex-between-center" v-for="(item,index) in closePopList" :key="index"
				@click="closePopList.map(it=>it.checked=false);item.checked=true">
				<text>{{ item.name }}</text>
				<view class="" v-if="item.checked">
					<u-icon name="checkbox-mark" size="18" color="#CB645E"></u-icon>
				</view>
			</view>
			<view class="cpBtn" @click="confirmClose">
				确认
			</view>
		</view>
	</u-popup>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	view {
		box-sizing: border-box;
	}

	.allContainer {
		padding: 16rpx 32rpx;
		padding-bottom: 200rpx;

		.orderStatus {
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			padding: 32rpx;
			font-weight: 600;
			font-size: 30rpx;
			margin-bottom: 16rpx;
		}

		.faInfo {
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			padding: 32rpx;
			margin-bottom: 16rpx;

			.faTit {
				font-size: 30rpx;
				font-weight: 600;
				margin-bottom: 16rpx;
			}

			.faCon {
				text {
					display: inline-block;
					margin: 6rpx 0;
				}

				text:nth-child(1) {
					width: 130rpx;
					font-size: 28rpx;
				}

				text:nth-child(2) {
					font-size: 26rpx;
					width: 520rpx;
				}
			}
		}

		.consumerInfo {
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			padding: 32rpx;
			margin-bottom: 16rpx;

			.cTit {
				font-size: 30rpx;
				font-weight: 600;
				margin-bottom: 16rpx;
			}

			.consumerCon {
				text {
					display: inline-block;
					margin: 6rpx 0;
				}

				text:nth-child(1) {
					font-size: 28rpx;
				}

				text:nth-child(2) {
					font-size: 26rpx;
				}
			}
		}

		.goodsInfo {
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			padding: 32rpx;
			margin-bottom: 16rpx;

			.gcGoods {
				margin-bottom: 32rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					margin-right: 16rpx;
				}

				.gcgCon {
					width: 450rpx;

					text:nth-child(1) {
						font-weight: 600;
					}

					text:nth-child(2) {
						font-size: 28rpx;
						margin: 16rpx 0;
					}

					text:nth-child(3) {
						font-size: 28rpx;
					}
				}
			}

			.gcInAll {
				color: #909399;
				font-size: 24rpx;
				text-align: right;
				margin-bottom: 16rpx;
			}
		}

		.orderInfo {
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			padding: 32rpx;
			margin-bottom: 16rpx;

			.oTit {
				font-size: 30rpx;
				font-weight: 600;
				margin-bottom: 16rpx;
			}

			.oCon {
				text {
					display: inline-block;
					margin: 6rpx 0;
				}

				text:nth-child(1) {
					font-size: 28rpx;
				}

				text:nth-child(2) {
					font-size: 26rpx;
				}
			}
		}
	}

	.fixedBox {
		width: 100%;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		text {
			display: inline-block;
			padding: 20rpx 100rpx;
			background-color: #CB645E;
			color: #fff;
			border-radius: 100rpx;
		}
	}

	.closePop {
		padding: 32rpx;

		.cpTit {
			font-weight: 700;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.cpItem {
			padding: 32rpx 0;
			border-bottom: 1rpx solid #e7e7e7;
			font-size: 30rpx;
			font-weight: 600;
		}

		.cpBtn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #CB645E;
			border-radius: 8rpx;
			color: #fff;
			margin-top: 300rpx;
			text-align: center;
		}
	}
</style>